<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>注册页面</title>
  <!--    引入格式文件-->
  <link rel="stylesheet" href="./css/reg.css" />
</head>

<body>
  <style></style>
  <div class="rg_layout">
    <div class="rg_left">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <form action="#" method="post" autocomplete="off">
          <table>
            <tr>
              <td class="td_left"><label for="username">用户名</label></td>
              <td class="td_right">
                <input type="text" id="username" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="password">密码</label></td>
              <td class="td_right">
                <input type="password" id="password" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="phone">手机号</label></td>
              <td class="td_right">
                <input type="text" id="phone" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">性别</label></td>
              <td class="td_right">
                <label><input type="radio" class="sex" name="sex" value="1" checked />男</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" class="sex" name="sex" value="0" />女</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">是否VIP</label></td>
              <td class="td_right">
                <label><input type="radio" class="vip" name="vip" value="1" />是</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" class="vip" name="vip" value="0" checked />否</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="question">密保问题</label></td>
              <td class="td_right">
                <input type="text" id="question" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="answer">密保答案</label></td>
              <td class="td_right">
                <input type="text" id="answer" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="avatar">头像</label></td>
              <td class="td_right">
                <input type="text" id="avatar" disabled />
                <button>选择图片</button><input type="file" hidden />
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <input type="submit" value="立即注册" id="btn_sub" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div class="rg_right">
      <p>已有账号？<a href="">立即登录</a></p>
    </div>
  </div>
</body>


<script>
  // document.querySelector('form').addEventListener('submit', (e) => {
  //   e.preventDefault()
  //   const username = document.querySelector('#username').value
  //   const password = document.querySelector('#password').value
  //   const phone = document.querySelector('#phone').value
  //   const sexa = document.querySelectorAll('.sex')
  //   const vipa = document.querySelectorAll('.vip')
  //   const question = document.querySelector('#question').value
  //   const answer = document.querySelector('#answer').value
  //   const sex = Array.from(sexa).filter(item => item.checked === true)
  //   const vip = Array.from(vipa).filter(item => item.checked === true)
  //   const data = JSON.stringify({
  //     username,
  //     password,
  //     phone,
  //     sex: +sex[0].value,
  //     vip: +vip[0].value,
  //     question,
  //     answer
  //   })
  //   console.log(data);


  //   const xhr = new XMLHttpRequest()
  //   xhr.open('POST', 'http://124.223.14.236:3001/api/user/reg')
  //   xhr.setRequestHeader("Content-Type", "application/json")
  //   xhr.send(data)
  //   xhr.onreadystatechange = () => {
  //     if (xhr.readyState === 4 && xhr.status === 200) {
  //       console.log(JSON.parse(xhr.responseText));
  //     }
  //   }

  // })


  // document.querySelector("form").addEventListener('submit', function (e) {
  //   e.preventDefault()
  //   const username = document.querySelector('#username').value
  //   const password = document.querySelector('#password').value
  //   const sexa = document.querySelectorAll('.sex')
  //   const vipa = document.querySelectorAll('.vip')
  //   const phone = document.querySelector('#phone').value
  //   const question = document.querySelector('#question').value
  //   const answer = document.querySelector('#answer').value

  //   const sex = Array.from(sexa).filter(item => item.checked === true)
  //   const vip = Array.from(vipa).filter(item => item.checked === true)


  //   // console.log(sex);
  //   const data = JSON.stringify({
  //     username,
  //     password,
  //     phone,
  //     question,
  //     answer,
  //     sex: +sex[0].value,
  //     vip: +vip[0].value,
  //   })
  //   // console.log(data);
  //   // console.log(+sex[0].value);
  //   const xhr = new XMLHttpRequest()
  //   xhr.open("post", "http://124.223.14.236:3001/api/user/reg")
  //   xhr.setRequestHeader("Content-Type", "application/json");
  //   xhr.send(data)
  //   xhr.onreadystatechange = function () {
  //     if (xhr.readyState === 4 && xhr.status === 200) {
  //       console.log(xhr.responseText);
  //     }
  //   }
  // })



  document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault()

    const username = document.querySelector('#username').value
    const password = document.querySelector('#password').value
    const phone = document.querySelector('#phone').value
    const sexa = document.querySelectorAll('.sex')
    const vipa = document.querySelectorAll('.vip')
    const question = document.querySelector('#question').value
    const answer = document.querySelector('#answer').value

    const sex = Array.from(sexa).filter((item) => {
      return item.checked === true


    })
    const vip = Array.from(vipa).filter((item) => {
      return item.checked === true


    })
    console.log();

    const data = {
      username, password, phone, vip: vip[0].value, sex: sex[0].value

    }

    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://124.223.14.236:3001/api/user/reg')
    xhr.send(data)

  })






















</script>


</html>